<template>
  <div id="home">
    <el-container>
      <!--            头部开始-->
      <el-header id="header">
        <div class="header-left">
          <span>OA系统</span>
        </div>

        <div class="header-right">
          <img :src="icon_url" alt="" height="40px">
          <span class="el-icon-s-custom">登录用户：{{userName}}</span>
          <!--                    下拉菜单-->
          <el-dropdown>
                      <span class="el-dropdown-link">
                        设置<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link id="first-id" to="/home/showhome/">首页</router-link>
              </el-dropdown-item>
              <el-dropdown-item><span @click="show_person">个人中心</span></el-dropdown-item>
              <el-dropdown-item><span @click="editpassword">修改密码</span></el-dropdown-item>
              <el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>


      </el-header>
      <!--            头部结束-->
      <!--            侧边开始-->
      <el-container>
        <el-aside width="200px" id="side">
          <el-menu
            background-color=" rgb(84, 92, 100)"
            text-color="#303133"
            active-text-color="#409EFF"
            unique-opened
            :collapse="false"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >
            <!--一级菜单-->
            <el-submenu
              :index="item.id+''"
              v-for="item in menulist"
              :key="item.id"
            >
              <!-- 一级菜单的模板区域-->
              <template slot="title">
                <!--图标-->
                <i :class="['iconfont',item.icon]" style="margin-right: 20px"></i>
                <!--文本-->
                <span>{{item.authName}}</span>

              </template>
              <el-menu-item

                :index="'/'+subItem.path"
                v-for="subItem in item.children"
                :key="subItem.id"
                @click="saveNavState('/'+subItem.path)"
              >
                <!--                -->
                <template slot="title">
                  <!--图标-->
                  <i class="el-icon-menu"></i>

                  <!--文本-->
                  <span>{{subItem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>

        <!--                侧边结束-->
        <!--                内容开始-->
        <!--        左侧修改密码-->
        <div>
          <el-drawer
            title="修改用户密码"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleclose">
            <div class="home-edit-password" style="text-align: center;">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item label="用户工号" prop="age">
                  <el-input v-model.number="ruleForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="password">
                  <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                  <el-input type="password" v-model="ruleForm.newpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkpassword">
                  <el-input type="password" v-model="ruleForm.checkpassword" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitPassword">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-drawer>
        </div>
        <!--        修改个人中心-->
        <div id="person">
          <el-drawer
            title="我是标题"
            :visible.sync="person"
            :with-header="false"
            style="text-align: center"
            :before-close="handleClose">
            <div id="person-element">
              <el-form :model="person_center">
                <!--              第一行-->
                <el-row>
                  <el-col class="person-element-one" :span="8">
                    <div style="text-align: center;height: 100px;line-height: 100px">
                      <span>更换头像</span>
                    </div>
                  </el-col>
                  <el-col class="person-element-tow" :span="8">
                    <div style="height: 100px">
                      <div class="demo-image__preview">
                        <el-upload
                          class="avatar-uploader"
                          :action="img_url"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                          <img v-if="img_url" :src="img_url" class="avatar"
                               style="height: 80px;width:80px;border-radius: 10px">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <!--             第二行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      用户名
                    </div>
                  </el-col>
                  <el-col :span="14">

                    <div class="grid-content bg-purple-light">
                      <el-input v-model="person_center.name"></el-input>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      职位信息
                    </div>
                  </el-col>
                  <el-col :span="14">

                    <div class="grid-content bg-purple-light">
                      <el-input disabled v-model="person_center.position"></el-input>
                    </div>
                  </el-col>
                </el-row>
                <!--              第三行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      性别
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label-width="0%">
                      <el-select v-model="person_center.sex" placeholder="请选择性别">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--第四行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      身份证
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="person_center.sid"></el-input>
                    </div>
                  </el-col>
                </el-row>
                <!--第五行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      邮箱号
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="person_center.email"></el-input>
                    </div>
                  </el-col>
                </el-row>
                <!--第六行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      微信号
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="grid-content bg-purple-light">
                      <el-input v-model="person_center.wetchat"></el-input>
                    </div>
                  </el-col>
                </el-row>
                <!--第七行-->
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      出生日期
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="block">
                      <el-date-picker
                        v-model="person_center.barthday"
                        type="datetime"
                        placeholder="选择生日">
                      </el-date-picker>
                    </div>

                  </el-col>
                </el-row>
                <el-button type="success" plain @click="submit">确认修改</el-button>
              </el-form>
            </div>
          </el-drawer>
        </div>
<!--        内容开始，视图显示的问题-->
        <el-main id="content">
          <div class="content-right-down">

            <router-view></router-view>
          </div>
        </el-main>
        <!--                内容结束
        -->
      </el-container>
    </el-container>

  </div>
</template>

<script>
  import CreateUserView from '@/components/admin/CreateUserView'
  import { mapState } from 'vuex'
  //导入创建用户组件
  export default {
    name: 'AdminHome',
    components: { CreateUserView },
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.newpassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var validpassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        }
      }
      return {
        //首页导航栏头像url
        icon_url: '',
        //图片保存到这里
        file_img: '',
        //个人中心要显示的数据
        person_center: {
          // username: '',
          // email: '',
          // sex: '',
          // sid: '',
          // birthday: '',
          // wetchat: ''
        },
        //显示的头像的地址
        srcList: [],
        //管理个人中心的显示
        person: false,
        //下面两个的是关于修改密码
        drawer: false,//修改密码的展示
        direction: 'rtl',
        //左侧菜单数据
        menulist: [],
        //是否折叠
        isCollapse: false,
        //被激活的链接地址
        activePath: '',

        msg: '这是home的数据',
        activeIndex2: '1',
        positions: '',
        parts: '',
        roles: '',
        opetions: '创建用户',
        img_url: '',
        position: '',

        //修改密码
        ruleForm: {
          newpassword: '',
          password: '',
          checkpassword: '',
          username: '',
        },
        rules: {
          newpassword: [
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          checkpassword: [
            {
              validator: validatePass2,
              trigger: 'blur'
            }
          ],
          password: [
            {
              validator: validpassword,
              trigger: 'blur'
            }
          ]
        },

      }
    }
    ,
    methods: {
      //个人中心退出抽屉前调用的函数

      //个人中心获取数据
      get_person () {
        this.$axios({
          url: this.$settings.base_url + `/user/personcenter/${sessionStorage.getItem('oaid')}/`,
          method: 'get'
        }).then(res => {
          console.log(res.data)
          this.person_center = res.data
          delete this.person_center.icon
        })
      },
      //修改个人中心数据
      editperson () {
        let id = this.person_center.id
        this.$axios({
          url: this.$settings.base_url + '/user/personcenter/' + id + '/',
          method: 'put',
          data: this.person_center
        }).then(res => {
          if (res) {
            this.$message.success('成功')
            this.get_person()
          }

        })
      },

      //个人中心展开
      show_person () {
        this.person = true
        //个人中心数据初始化
        this.get_person()
      },
      //提交修改密码的函数
      submitPassword () {
        this.$axios({
          url: this.$settings.base_url + '/user/password/',
          method: 'patch',
          data: this.ruleForm
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success(res.data.msg)
            this.logout()
            this.$message.success('请先登录！！！')
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },

      resetForm (formName) {
        this.$refs[formName].resetFields()

      },
      //点击修改密码的时候，弹出对话框来。
      editpassword () {
        this.drawer = true
        this.ruleForm.username = sessionStorage.getItem('username')
      }
      ,
      //修改密码窗口是否关闭
      handleclose (done) {
        done()
      }
      ,
      //退出登录
      logout () {
        //删除sessionStore中数据
        sessionStorage.clear()
        //跳转到登录界面
        this.$router.push('/login/')
        //删除vuex中的数据
        window.location.reload()
      }
      ,
      //侧边导航函数，点击某个选向时，跳转到指定的路由去
      menuClick (index) {
        this.$router.push(index)
      }
      ,
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      }
      ,

      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      }
      ,

      createuser () {
        this.$axios({
          method: 'get',
          url: this.this.$settings.base_url + '/user/createuser/',
        }).then(res => {
          this.choicedatas = res.data.data
        }).catch(error => {
          console.log(error)
        })
      },
      get_icon () {
        this.$axios({
          url: this.$settings.base_url + '/user/personupdate/',
          method: 'get'
        }).then(res => {
          if (res.data.code === 100) {
            this.$store.commit('setIcon', res.data.data.icon)
            this.Icon = res.data.data.icon
            this.icon_url = this.$settings.media_url + res.data.data.icon
          }
        })
      },
      handleClose (done) {
        this.get_person()
        this.get_icon()
        //头像的地址
        this.icon_url = 'http://127.0.0.1:8000' + this.Icon
        this.img_url = 'http://127.0.0.1:8000' + this.Icon
        //头像的地址列表
        this.srcList[0] = this.img_url
        //将存储在vuex的rightList赋值给menulist菜单栏，初始化菜单数据
        this.menulist = this.rightList
        done()

      }
      ,
      //点击了左侧菜单的功能
      saveNavState (url) {
        this.$router.push('/home' + url)
        this.ruleForm.username = sessionStorage.getItem('username')
      },
      //上传图片的函数
      handleAvatarSuccess (res, file) {
        this.img_url = URL.createObjectURL(file.raw)
        this.file_img = file.raw
        var formdata = new FormData()
        formdata.append('icon', file.raw)
        this.$axios({
          url: this.$settings.base_url + '/user/personupdate/',
          method: 'patch',
          data: formdata
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('头像更换成功')
            this.get_icon()
          } else {
            this.$message.error('头像更换失败')
          }
        })
      },

      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        this.$message.warning(('文件上传中'))
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      //修改个人中心的信息，除了头像
      submit () {
        this.$axios.post(this.$settings.base_url + '/user/personupdate/', this.person_center).then(res => {
          if (res.data.code === 100) {
            this.$message.success('修改用户信息成功')
            this.get_person()
          } else {
            this.$message.error(res.data.error)
          }
        })
      }

    }
    ,
    mounted () {
      //头像的地址
      this.icon_url = 'http://127.0.0.1:8000' + this.Icon
      this.img_url = 'http://127.0.0.1:8000' + this.Icon
      //头像的地址列表
      this.srcList[0] = this.img_url
      //将存储在vuex的rightList赋值给menulist菜单栏，初始化菜单数据
      this.menulist = this.rightList

    }
    ,
    computed: {
      ...mapState(['rightList', 'userName', 'Icon']),
      //将vuex中存储的映射成计算属性
    }
    ,

  }
</script>

<style scoped>

  /*头部样式开始*/
  .el-header {
    background-color: #2368c3;
    color: #fff;
    line-height: 72px;
    padding: 0;
    margin: 0;
  }

  /*个人中心的样式*/
  .bg-purple {
    height: 40px;
    line-height: 40px;

  }

  .bg-purple-light {
    height: 40px;
  }

  #first-id:hover {
    color: #2368c3;
  }

  #first-id {
    color: #3b3737;
  }

  .header-left[data-v-9ea40744] {
    font-size: 26px;
    margin-right: 600px;
  }

  .header-right[data-v-9ea40744] {
    float: right;
    margin-right: 39px;
    line-height: 6;
  }

  /*头部-》下拉菜单的样式开始*/
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
    margin-left: 20px;
  }

  .el-icon-arrow-down {
    font-size: 12px;

  }

  .el-row {
    margin-bottom: 10px;
  }

  /*头部-》下拉菜单的样式结束*/

  .el-header > div {
    display: inline-block;
  }

  .header-left {
    font-size: 18px;
    margin-left: 50px;

  }

  .header-right {
    float: right;
    margin-right: 20px;
  }

  .header-right img {
    border-radius: 10px;
    margin-right: 20px;
  }

  /*头部样式结束*/
  /*侧边导航栏样式*/
  .el-aside {
    background-color: #343345;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 630px;
  }

  /*侧边导航栏样式*/
  /* 内容样式开始*/
  .el-main {
    background-color: #e9eef3;
  }

  .content-right-down {
    height: 590px;
    background-color: white;
    box-shadow: 0 0 25px #333333;
  }

  /*    内容样式结束*/
  /*个人中心的样式*/
  #person-element {
    margin-top: 50px;

  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
